import {
  defineConfig,
  presetAttributify,
  presetUno,
  transformerCompileClass,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss';

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
    transformerCompileClass(),
  ],
  shortcuts: {
    'border-solid-light': 'border-1px border-solid border-border-light',
    'flex-center': 'flex items-center justify-center',
    'inline-flex-center': 'inline-flex items-center justify-center',
    // 页面布局中除去顶部导航栏和面包屑所在的工具，剩下的高度，即内容区域的高度（最小高度）
    'layout-content-height': 'h-[calc(100vh-var(--layout-header-height)-var(--layout-toolbar-height))]',
    'simple-card': 'p-24px rounded-4px bg-white shadow-light',
  },
  rules: [],
  theme: {
    colors: {
      ...createThemeColors(),
      border: {
        base: 'var(--el-border-color)',
        light: 'var(--el-border-color-light)',
      },
      text: {
        primary: 'var(--el-text-color-primary)',
        regular: 'var(--el-text-color-regular)',
        secondary: 'var(--el-text-color-secondary)',
        disabled: 'var(--el-text-color-disabled)',
        placeholder: 'var(--el-text-color-placeholder)',
      },
      fill: {
        'basic': 'var(--el-fill-color)',
        'light': 'var(--el-fill-color-light)',
        'lighter': 'var(--el-fill-color-lighter)',
        'extra-light': 'var(--el-fill-color-extra-light)',
      },
    },
    boxShadow: {
      basic: '0px 0px 6px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.04)',
      light: '0px 2px 12px 0px rgba(0, 0, 0, 0.10)',
    },
    breakpoints: {
      sm: '768px',
      md: '992px',
      lg: '1200px',
      xl: '1920px',
    },
  },
});

type ThemeColorKey = 'primary' | 'success' | 'warning' | 'danger' | 'error' | 'info';

function getColorKey(color: ThemeColorKey, theme?: 'dark' | 'light', palette?: number) {
  return [color, theme, palette].filter(t => Boolean(t)).join('-');
}

function getElementColorVar(color: ThemeColorKey, theme?: 'dark' | 'light', palette?: number) {
  return `var(--el-color-${getColorKey(color, theme, palette)})`;
}

function addPalettes(colors: Record<string, string>, palettes: number[], theme: 'dark' | 'light', color: ThemeColorKey) {
  palettes.forEach((palette) => {
    const key = getColorKey(color, theme, palette);
    colors[key] = getElementColorVar(color, theme, palette);
  });
}

function createThemeColors() {
  const colorKeys: ThemeColorKey[] = ['primary', 'success', 'warning', 'danger', 'error', 'info'];
  const lightPalettes: number[] = [3, 5, 7, 9];
  const darkPalettes: number[] = [2];

  const colors: Record<string, string> = colorKeys.reduce((acc, item) => {
    const color = { [item]: getElementColorVar(item) };
    addPalettes(color, lightPalettes, 'light', item);
    addPalettes(color, darkPalettes, 'dark', item);
    return { ...acc, ...color };
  }, {});

  return colors;
}
